// 获取 本地存储里面的 CMSTOKEN 
// 如果没有登录 不能访问首页 需要跳转到登录页面
const token = localStorage.getItem('CMSTOKEN')
if (!token) {
  alert('亲，您没有登录😊')
  location.href = './login.html'
}


/*
  1. 发送ajax 请求 获取 班级 概览数据
*/

axios({
  url: '/student/overview'
}).then(function ({ data: { data: res } }) {
  // console.log(res)
  document.querySelector('.total').innerHTML = res.total
  document.querySelector('.avgSalary').innerHTML = res.avgSalary
  document.querySelector('.avgAge').innerHTML = res.avgAge
  document.querySelector('.proportion').innerHTML = res.proportion
})


axios({
  url: '/student/list'
}).then(function ({ data: { data: res } }) {
  // console.log(res)

  // 调用函数 显示 折线图里面的相关的数据
  /*
    折线图  
      const lineObj = {
        names: [], // 放 x 轴里面的同学的姓名
        salary: [], // 放 期望薪资的数据
        truesalary: [] // 放实际薪资的数据
      }
  */
  const lineObj = {
    names: [],
    salary: [],
    truesalary: []
  }

  // 保存 饼状图里面的数据 
  const pieArr = []

  // 遍历数据

  const geoObj = {}

  const geoArr = []

  res.forEach(item => {
    // console.log(item)
    // console.log(item.name)
    lineObj.names.push(item.name)
    lineObj.salary.push(item.salary)
    lineObj.truesalary.push(item.truesalary)

    const index = pieArr.findIndex(val => val.name === item.province)
    if (index === -1) {
      pieArr.push({
        name: item.province,
        value: 1
      })
    } else {
      pieArr[index].value++
    }
    // 将学生的区县 设置为对象的属性 属性值 经纬度的数组
    geoObj[item.county] = [item.jing, item.wei]
    geoArr.push([{
      name: item.county,
      value: 1
    }])

  })

   // 调用折线图函数
  setLine(lineObj)
  // 调用饼状图函数
  setPie(pieArr)

  setMap(geoObj, geoArr)
})


// 折线图

const setLine = (data) => {
  const myCharts = echarts.init(document.querySelector('.line'))
  const option = {
    color: ['#ee6666', '#5470c6'],
    // 提示框组件
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    // 图例组件
    legend: {
    },
    // 标题组件
    title: {
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    // x轴
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.names
    },
    // y轴
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%']
    },
    // 控制缩放
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 10
      },
      {
        start: 0,
        end: 10
      }
    ],
    // 核心 数据
    series: [
      {
        name: '期望薪资',
        type: 'line',
        symbol: 'none',
        smooth: true,
        data: data.salary
      },
      {
        name: '实际薪资',
        type: 'line',
        symbol: 'none',
        smooth: true,
        data: data.truesalary
      }
    ]
  }
  myCharts.setOption(option)
}

// setLine()


// 饼状图
const setPie = data => {
  const myCharts = echarts.init(document.querySelector('.pie'))
  const option = {
    // 标题组件
    title: {
      text: '籍贯 Hometown',
      textStyle: {
        color: '#6d767e'
      }
    },
    // 提示框组件
    tooltip: {
      trigger: 'item',
      // {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
      formatter: '{a} <br/>{b} <b>{c}</b>人 占比{d}%'
    },
    // 数据
    series: [
      {
        name: '各地人员分布',
        type: 'pie',
        radius: ['10%', '60%'],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 4
        },
        data
      }
    ]
  }
  myCharts.setOption(option)
}


// setPie()


// 柱状图
const setBar = res => {
  // return console.log(res)
  const myCharts = echarts.init(document.querySelector('.barChart'))
  const option = {
    // 提示框组件
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    // 图例组件
    legend: {},
    // 类似于 pdding的效果
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: res.group,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          formatter: '{value} 分'
        },
        min: 0,
        max: 100,
        interval: 10
      },
      {
        type: 'value',
        axisLabel: {
          formatter: '{value} 人'
        },
        min: 0,
        max: 10,
        interval: 1
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
        barWidth: 15,
        data: res.avgScore
      },
      {
        name: '低于60分人数',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: res.lt60
      },
      {
        name: '60分到80分之间人数',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: res.gt60
      },
      {
        name: '高于80分人数',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: res.gt80
      }
    ]
  }
  myCharts.setOption(option)
}

// setBar()


// 根据次数获取对应组的成绩
const batch = (batch = 1) => {
  axios({
    url: '/score/batch',
    params: {
      batch
    }
  }).then(({ data: { data: res } }) => {
    // console.log(res)
    setBar(res)
  })
}

// 先默认让 请求第一次的成绩
batch()


// 获取ul 标签
const ul = document.querySelector('#batch')

// 给 span标签注册点击事件
document.querySelector('span.btn').addEventListener('click', function () {
  // ul.style.display = 'block'
  // console.log(ul.style.display)
  if (ul.style.display === 'block') {
    ul.style.display = 'none'
  } else {
    ul.style.display = 'block'
  }
})

// 获取ul里面的所有的li 
ul.querySelectorAll('li').forEach((item, index) => {
  // 给每一个li注册点击事件
  item.addEventListener('click', function () {
    // 调用获取第几次成绩的函数
    // console.log(index)
    batch(index + 1)
  })
})


const setMap = (geoDate, arr) => {
  // 3.1 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector('.map'))

  // 3.2 指定图表的配置项和数据
  let chinaGeoCoordMap = geoDate
  // console.log(chinaGeoCoordMap)

  chinaGeoCoordMap['武汉校区'] = [114.3896, 30.6628]

  let chinaDatas = arr
  let planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705';

  let convertData = function (data) {
    let res = [];
    for (let i = 0; i < data.length; i++) {
      let dataItem = data[i];
      let fromCoord = chinaGeoCoordMap[dataItem[0].name];
      let toCoord = [114.3896, 30.6628]; // 目标点经纬度（北京顺义校区）
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  let series = [];
  [['武汉校区', chinaDatas]].forEach(function (item, i) {
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.2 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 12
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 4 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 6,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            offset: [5, 0],
            color: 'yellow', // 目标点文字颜色
            formatter: '{b}',
            textStyle: {
              color: "yellow"
            }
          },
          emphasis: {
            show: true,
            color: "green", // 目标点鼠标移入的颜色
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  let option = {
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          // color: 'rgba(51, 69, 89, .5)', //地图背景色
          // color: '#5a6fc0', //地图背景色
          // borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  };

  // 3.3使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

// setMap()